<template>
    <page class="loan-page">
        <v-back/>


        <div class="loan-list" v-if="dataList.length">
            <template v-for="item in dataList">
                <card class="loan-item">
                    <div class="business">
                        <img :src="showImg(item.imageUrl)" class="bank">
                        <div class="business-info">
                            <p class="bank-name">{{item.productAgency}} - {{item.productName}}</p>
                            <p class="desc">年化{{item.interestRate}}</p>
                            <div class="tag-group">
                                <span>{{item.repaymentTypeName}}</span>
                            </div>
                            <p class="price">最高{{item.quotaMax}}万</p>
                        </div>
                        <span class="tip" v-if="item.type === 1">票贷</span>
                        <span class="tip" v-if="item.type === 2">税贷</span>
                        <span class="tip" v-if="item.type === 3">抵押的</span>
                    </div>
                    <div class="loan-detail">
                        <!--<div class="key-value">
                            <label class="key">业务编号：</label>
                            <span class="value">{{item.companyCreditCode}}</span>
                        </div>-->
                        <div class="key-value">
                            <label class="key">业务状态：</label>
                            <div class="value value-center">
                                <span class="status" :class="setClass(item.businessProductShowStatus)">{{status[item.businessProductShowStatus]}}</span>
                                <a href="javascript: void (0)" @click="historyStatus(item)">历史状态</a>
                            </div>
                        </div>
                        <div class="key-value">
                            <label class="key">申请企业：</label>
                            <span class="value">{{item.companyName}}</span>
                        </div>
                        <div class="key-value">
                            <label class="key">申请时间：</label>
                            <span class="value">{{item.createTime}}</span>
                        </div>
                    </div>
                </card>
            </template>
        </div>

        <van-empty v-else class="loan-list"></van-empty>


        <van-dialog v-model="showStatus" className="status-modal" :showConfirmButton="false">
            <div class="status-modal-body">
                <div class="content-group">
                    <steps :active="active" :type="type" :status="successStatus"/>
                </div>
                <van-icon name="close" @click="closeModal"/>
            </div>
        </van-dialog>
    </page>
</template>

<script>
    import steps from '@/components/steps'
    import vRefresh from '@/components/refresh'

    export default {
        name: "loan",
        components: {steps,vRefresh},
        data() {
            return {
                showStatusArray: [],
                finished: true,
                loading: false,
                isLoading: false,
                showStatus: false,
                type: 'success',
                active: 0,
                status: {'-2': '已退件', '-1': '审核拒绝', 0: '待受理', 1: '已受理', 2: '审批中', 3: '审批成功', 4: '已放款'},
                successStatus: [],

                dataList: []
            }
        },
        created(){
            this.getData();
        },
        methods: {
            //状态    0;分配内控员  1出具方案 2准备进件  3进行中  4已完成

            //设置class
            setClass(status) {
                switch (status) {
                    case 0:
                        //return 'loan';
                        return 'audit';
                    case 1:
                        return 'audit';
                    case 2:
                        return 'audit';
                    case 3:
                        return 'success';
                    case 4:
                        return 'success';
                    case -1:
                        return 'error';
                    case -2:
                        return 'error';
                }
            },

            //获取数据
            async getData(){
                this.$loading();
                try {
                    const res = await this.$http.get('/mp/user/business/list');
                    console.log(res);
                    this.dataList = res.data;
                }catch (e) {

                }finally {
                    this.$loading.close();
                }
            },

            //加载更多
            onLoad(){

            },

            //刷新
            onRefresh(){
                setTimeout(_ => {
                    this.isLoading = false;
                },2000)
            },

            historyStatus(item) {
                let status = [];
                if(item.createTime){
                    status.push({id: 0, name: '审核中',date: item.createTime});
                }
                if(item.businessProductShowStatus < 0){
                    status.push({id: 1, name: '审核拒绝',date: ''});
                }else{

                    if(item.creditTime){
                        status.push({id: 1, name: '审核成功',date: item.creditTime});
                        this.active = 1;
                    }
                    if(item.loanTime){
                        status.push({id: 2, name: '已放款',date: item.loanTime});
                        this.active = 2;
                    }
                }
                this.successStatus = status;
                this.type = item.businessProductShowStatus >= 0 ? 'success' : 'error';

                this.showStatus = true;
            },

            closeModal() {
                this.showStatus = false;
            }
        }
    }
</script>

<style scoped lang="less">
    .loan-page {
        background-color: @page-color;

        .loan-list {
            padding: @padding @padding 0;
            overflow-y: auto;

            .loan-item {
                background-color: #fff;
                margin-bottom: @padding;

                .business {
                    display: flex;
                    align-items: center;
                    padding: @padding;
                    position: relative;

                    .tip {
                        position: absolute;
                        top: 10px;
                        left: 10px;
                        color: #fff;
                        background: rgb(253, 73, 16);
                        font-size: 8px;
                        padding: 0 5px;
                        border-radius: 3px;
                        display: flex;
                    }

                    .bank {
                        width: .74rem;
                    }

                    .business-info {
                        margin-left: @padding*2;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: center;

                        .bank-name {
                            font-size: 14px;
                            font-weight: 700;
                        }

                        .desc {
                            color: #999;
                            font-size: @small;
                        }

                        .tag-group {
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            span {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                background: rgba(255, 236, 227, 1);
                                color: #FF6010;
                                margin-right: 5px;
                                padding: 0 5px;
                                border-radius: 3px;
                                font-size: 7px;
                            }
                        }

                        .price {
                            color: @price-color;
                            font-size: @normal;
                            margin-top: 6px;
                            font-weight: 600;
                        }
                    }

                    .btn {
                        font-size: @mini;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: .75rem;
                        height: .25rem;
                        text-decoration: none;
                        border: 1px solid @theme-color;
                        color: @theme-color;
                        border-radius: .25rem;
                        background: #fff;
                    }
                }

                .loan-detail {
                    padding: 10px;
                    position: relative;

                    .key-value {
                        .key {
                            width: .75rem;
                        }
                    }

                    &:after {
                        content: '';
                        position: absolute;
                        left: 10px;
                        right: 10px;
                        top: 0;
                        height: 1px;
                        background-color: @border-color;
                    }
                }
            }
        }

        .key {
            color: #333;
        }

        .status.audit {
            color: @theme-color;
        }

        .status.success {
            color: #5AA609;
        }

        .status.loan {
            color: #ccc;
        }

        .status.error {
            color: #E02020;
        }

        .status-modal {
            background-color: transparent;

            &-body {
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: transparent;

                .content-group {
                    box-sizing: border-box;
                    background-color: #fff;
                    padding: @padding;
                    border-radius: 6px;
                    width: 252px;
                }

                i {
                    margin-top: 30px;
                    color: #ccc;
                    font-size: 34px;
                }
            }
        }
    }
</style>
